<script setup lang="ts">
import { ElButton, ElInput, Sort } from 'element-plus'
import { Table } from '@/components/Table'
import { getAppParameterValuesListApi } from '@/api/app-parameter-value'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { TableColumn } from '@/types/table'
import { Search, SearchItem } from '@/components/Search'
import { AppParameterValue } from '@/api/app-parameter-value/types'

defineOptions({
  name: 'AppParameterValue'
})

const { push } = useRouter()

const conditions = reactive({
  code: '',
  name: ''
})

const defaultSort = ref<Sort>({
  prop: 'app_parameter_name.sequence',
  order: 'ascending'
})

const { register, tableObject, methods } = useTable<AppParameterValue>({
  getListApi: getAppParameterValuesListApi,
  defaultSort: defaultSort.value
})

const { getList, setSearchParams, onSortChanged } = methods

setSearchParams(conditions)

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'app_parameter_name.name',
    label: '名称',
    width: '200',
    showOverflowTooltip: true
  },
  {
    field: 'app_parameter_name.description',
    label: '描述',
    width: 'auto'
  },
  {
    field: 'app_parameter_value',
    label: '参数值',
    width: '200'
  },
  {
    field: 'app_parameter_name.sequence',
    label: '序号',
    width: '100px',
    align: 'right',
    headerAlign: 'right',
    sortable: 'custom'
  },
  {
    field: 'action',
    width: '120px',
    label: '操作',
    headerAlign: 'center',
    align: 'center'
  }
])

const EditAction = (row: AppParameterValue) => {
  push(`/settings/app-parameter-value-edit/id/${row.id}`)
}
</script>

<template>
  <Search :model="conditions" @search="setSearchParams" @reset="setSearchParams">
    <SearchItem label="代码" prop="code">
      <ElInput v-model="conditions.code" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="名称" prop="name">
      <ElInput v-model="conditions.name" maxlength="200" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <Table
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      :selection="false"
      :default-sort="defaultSort"
      @register="register"
      @sort-change="onSortChanged"
    >
      <template #action="{ row }">
        <ElButton
          v-hasPermi="'settings:app-parameter-value:edit'"
          type="primary"
          link
          size="small"
          @click="EditAction(row)"
        >
          编辑
        </ElButton>
      </template>
    </Table>
  </div>
</template>
